<template>
  <view class="list-box">
    <view class="list-title">
      <image :src="image_hosts+'/end/title-jinbi.png'"></image>
      看养生知识 奖励送不停
    </view>
    <view class="message">
      <view class="message-item">
        <view class="message-icon"></view>
        看首页小视频或参与热门话题，每天最高得60积分哦！
      </view>
      <view class="message-item">
        <view class="message-icon"></view>
        积分购买商品可抵现金！
      </view>
    </view>
    <view class="list">
      <view v-for="(item,index) in videoList" @click="toVideoList(item,index)">
        <view class="item video" v-if="item.dataType===1">
          <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>
          <view class="item-box">
            <view class="type-icon">
              <image :src="image_hosts+'/end/play.png'"></image>
            </view>
            <view class="video-num">
              <image :src="image_hosts+'/end/huohua.png'"></image>
              播放量:{{item.playCount}}
            </view>
            <view class="video-title">
              {{ item.title }}
            </view>
          </view>
        </view>
        <view class="item topic" v-if="item.dataType===2">
          <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>
          <view class="item-box">
            <view class="type-icon">
              <image :src="image_hosts+'/end/title2.png'"></image>
              <text>康粉圈</text>
            </view>
            <view class="topic-title-box">
              <view class="topic-title">
                #{{ item.title }}
              </view>
              <view class="topic-button">
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.list-box {
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  margin-top: 30upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.list-box .list-title {
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/title.png");
  background-size: 100% 100%;
  width: 662upx;
  height: 82upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46upx;
  color: #fff;
  font-weight: 500;
  margin-top: -10upx;
  z-index: 10;
  position: absolute;
  top: -1upx;
  left: 50%;
  transform: translate(-50%, 0);
}

.list-box .list-title image {
  width: 76upx;
  height: 61upx;
}

.message {
  width: 690upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/bg_tishi@2x.png");
  background-size: 100% 100%;
  margin-top: 102upx;
  box-sizing: border-box;
  padding: 10upx;
}

.message-item {
  width: 100%;
  display: flex;
  font-size: 34upx;
  color: #F18900;
  font-weight: 500;
  line-height: 40upx;
}

.message-item .message-icon {
  width: 12upx;
  height: 12upx;
  background-color: #F18900;
  border-radius: 50%;
  margin-top: 15upx;
  margin-right: 10upx;
}

.list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0 30upx;
  column-count: 2;
  column-gap: 18upx;
  margin-top: 24upx;
}

.item {
  width: 336upx;
  height: 516upx;
  margin-bottom: 24upx;
  position: relative;
}

.bj {
  width: 100%;
  height: 100%;
}

.item-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
}

.type-icon {
  position: absolute;
  top: 20upx;
  left: 20upx;
  width: 50upx;
  height: 50upx;
}

.type-icon image {
  width: 100%;
  height: 100%;
}

.video-num {
  box-sizing: border-box;
  padding: 3upx 9upx;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0 21upx 21upx 0;
  display: flex;
  align-items: center;
  width: fit-content;
  position: absolute;
  top: 362upx;
  left: 0;
}

.video-num image {
  width: 24upx;
  height: 28upx;
  margin-right: 4upx;
}

.item .video-title {
  max-height: 300upx;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  box-sizing: border-box;
  padding: 12upx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic .type-icon {
  width: 164upx;
  height: 50upx;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 0 100upx 100upx 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12upx;
  left: 0;
  font-size: 32upx;
  color: #00C141;
  font-weight: 600;
}

.topic .type-icon image {
  width: 34upx;
  height: 34upx;
  margin-right: 6upx;
}

.topic-title-box {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  padding: 12upx;
}

.topic-title {
  font-size: 38upx;
  color: #fff;
  font-weight: 600;
  word-break: break-all;
  width: 100%;
}
</style>
